<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>${system_name!?html}</title>

    <!-- jquery  v11.1-->
    <script type="text/javascript" src="${request.contextPath}/skins/js/jquery.min.js"></script>
    <!-- layui的样式包 -->
    <link rel="stylesheet" href="${request.contextPath}/skins/layui/css/layui.css" media="all"/>

    <!-- layui的js,模块化使用 -->
    <script type="text/javascript" src="${request.contextPath}/skins/layui/layui.js"></script>
    <style>
        .layui-tab-item,.layui-tab-content{
            width: 100%;
            height: 100%;
            padding: 0px;
        }
        .layui-tab{
            padding: 0px;
            margin: 0px;
        }
    </style>

    <!--layui的js,可非模块化 -->
<!--    <script type="text/javascript" src="${request.contextPath}/skins/layui/layui.all.js"></script>-->

</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">${system_name!?html}</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="">控制台</a></li>
            <li class="layui-nav-item"><a href="">商品管理</a></li>
            <li class="layui-nav-item"><a href="">用户</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">其它系统</a>
                <dl class="layui-nav-child">
                    <dd><a href="">邮件管理</a></dd>
                    <dd><a href="">消息管理</a></dd>
                    <dd><a href="">授权管理</a></dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    贤心
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">退了</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域 3层 -->
<!--            <ul class="layui-nav layui-nav-tree"  lay-filter="test">-->
                <ul class="layui-nav layui-nav-tree" lay-filter="admin-side-nav" style="margin-top: 15px;">
                    <#list  menus  as  menu>
                        <#if menu.children??>
                            <li class="layui-nav-item">
                                <a lay-href="javascript:" menu_url="${menu.url}" menu_name="${menu.id}" menu_id="${menu.id}"
                                    <#if menu.type=3>class="left_navigation"</#if>  >
                                    <i class="${menu.icon}"></i>&emsp;<cite>${menu.name}</cite>
                                </a>
                                <dl class="layui-nav-child">
                                    <#list  menu.children  as  subMenu>
                                        <#if subMenu.children??>
                                            <dd>
                                                <a>${subMenu.name}</a>
                                                <dl class="layui-nav-child">
                                                    <#list  subMenu.children  as  subSubMenu>
                                                        <dd>
                                                            <a lay-href="javascript:" menu_url="${subSubMenu.url}" menu_name="${subSubMenu.id}" menu_id="${subSubMenu.id}"
                                                                <#if subSubMenu.type=3> class="left_navigation" </#if> >
                                                                ${subSubMenu.name}
                                                            </a>
                                                        </dd>
                                                    </#list>
                                                </dl>
                                            </dd>
                                        <#else>
                                             <dd>
                                                 <a lay-href="javascript:" menu_url="${subMenu.url}" menu_name="${subMenu.name}" menu_id="${subMenu.id}"
                                                    <#if subMenu.type=3 > class="left_navigation" </#if> >
                                                     ${subMenu.name}
                                                 </a>
                                             </dd>
                                        </#if>
                                    </#list>
                                </dl>
                            </li>
                        <#else>
                            <li class="layui-nav-item" >
                                <a lay-href="javascript:"  menu_url="${menu.url}" menu_name="${menu.name}" menu_id="${menu.id}"
                                    <#if menu.type=3 > class="left_navigation" </#if> >
                                    <i class="${menu.icon}"></i>&emsp;
                                    <cite>${menu.name}</cite>
                                </a>
                            </li>
                        </#if>
                    </#list>
            </ul>
        </div>
    </div>

    <div class="layui-body">
            <!-- 内容主体区域 -->
            <!--tabs标签-->
            <div class="layui-tab layui-tab-card" lay-filter="head_tabs" lay-allowclose="true" >
                <ul class="layui-tab-title">
                    <!--   <li class="layui-this">角色管理</li>-->
                </ul>
                <div class="layui-tab-content" id="tab_div">
                    <!--<div class="layui-tab-item layui-show">
                    </div>-->
                    <!--<div class="layui-tab-item">
                        <iframe  style="width: 100%;height: 100%;" scrolling="no" src="jiaose.html" ></iframe>
                    </div>-->
                </div>
            </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>
</div>

<script>

    // $(".layui-body").width();
    console.log($(".layui-body"));
    console.log($(".layui-body").height());
    layui.use('element', function(){
        //Tab的切换功能，切换事件监听等，需要依赖element模块
        var $ = layui.jquery
            ,element = layui.element;

        //触发事件
        var active = {
            tabAdd: function(){
                //新增一个Tab项
                var menu_url=$(this).attr('menu_url');
                var menu_name=$(this).attr('menu_name');
                var menu_id=$(this).attr('menu_id');
                //先判断是否已经有了tab
                var arrayObj = new Array();　//创建一个数组
                $(".layui-tab-title").find('li').each(function() {
                    var y = $(this).attr("lay-id");
                    arrayObj.push(y);
                });
                var have=$.inArray(menu_id, arrayObj);
                if (have>=0) {
                    //tab已有标签
                    element.tabChange('head_tabs', menu_id); //切换到当前点击的页面
                } else{
                    //没有相同tab
                    element.tabAdd('head_tabs', {
                        title:menu_name
                        ,content: '<iframe  frameBorder="0" style="width: 100%;height: 100%"  scrolling="no" src='+menu_url+' ></iframe>'
                        ,id: menu_id

                    })
                    element.tabChange('head_tabs', menu_id); //切换到当前点击的页面
                }
            }

        };
        element.on('tab(head_tabs)', function(data){
            var lay_id=$(this).attr("lay-id");
            var nav_tree=$(".layui-nav-tree");
            //移除其他选中
            nav_tree.find("a[menu_id]").parent().removeClass("layui-this");
            //选中点击的
            var kv="a[menu_id='"+lay_id+"']";
            nav_tree.find(kv).parent().addClass("layui-this")
        });

        $(".left_navigation").click(function(){
            var type="tabAdd";
            var othis = $(this);
            active[type] ? active[type].call(this, othis) : '';
        });

    });

    var size_update=function (){
        var height=$(".layui-body").height();
        $("#tab_div").height(height-45);
    }
    size_update();
    window.onresize = function() {
        size_update();
    };
</script>
</body>
</html>